<template>
  <div class="water-mark">
    <div class="preview-wrap">
      <h2>预览效果</h2>
      <div class="show-wrap">
        <div class="show-txt">
          <p v-for="i in 5" :key="i"
            >PDF文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容PD,F文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容,PDF文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容PD,F文字内容PDF文字内容PDF文字内容PDF文字内容PDF文字内容,PDF文字内容PDF文字内容</p
          >
        </div>
        <div
          class="content"
          :style="{
            fontSize: form.fontSize.content * 0.5 + 'px',
            left: form.x.content * 0.5 + 'px',
            top: form.y.content * 0.5 + 'px',
            transform: 'rotate(' + form.r.content * -1 + 'deg)',
            color:
              'rgba(' +
              form.red.content +
              ', ' +
              form.green.content +
              ', ' +
              form.blue.content +
              ', ' +
              form.f.content +
              ')',
          }"
          >{{ form.text.content }}</div
        >
      </div>
      <span style="color: #666">注：PDF参考尺寸820像素 * 1060像素等比缩放</span>
    </div>
    <div class="setting-wrap">
      <h2>参数设置</h2>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="水印文字">
          <el-input v-model.trim="form.text.content" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            v-model="form.fontSize.content"
            :min="12"
            :max="100"
            :step="2"
          >
          </el-slider>
        </el-form-item>
        <el-form-item label="距离左边">
          <el-slider v-model="form.x.content" :min="0" :max="820" :step="2">
          </el-slider>
        </el-form-item>
        <el-form-item label="距离顶部">
          <el-slider v-model="form.y.content" :min="0" :max="1060" :step="2">
          </el-slider>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-slider v-model="form.r.content" :min="0" :max="360" :step="2">
          </el-slider>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker
            v-model="color"
            show-alpha
            color-format="rgb"
            @active-change="handleChangeColor"
          ></el-color-picker>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="small" @click="handleSubmit"
        >保存设置</el-button
      >
    </div>
  </div>
</template>
<script>
import { tbSysDictDetailUpdate } from '@/api/admin/system/data-dictionary.js'
export default {
  data() {
    return {
      form: {
        text: {},
        fontSize: {},
        x: {},
        y: {},
        r: {},
        green: {},
        red: {},
        blue: {},
        f: {},
      },
      color: 'rgba(0,0,0,1)',
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      //获取水印数据列表
      let id = await this.$store.dispatch(
        'getDictionaryEnumListIdByCode',
        'WATERMARK_SETTINGS',
      )
      let dataList = await this.$store.dispatch(
        'getDictionaryEnumListChildrenById',
        id,
      )
      dataList.forEach((item) => {
        if (item.deName == 'f') {
          item.content = item.content.replace(/f/g, '')
        }
        if (item.deName != 'text') {
          item.content = item.content * 1
        }
        this.form[item.deName] = JSON.parse(JSON.stringify(item))
      })
      this.color =
        'rgba(' +
        this.form.red.content +
        ',' +
        this.form.green.content +
        ',' +
        this.form.blue.content +
        ',' +
        this.form.f.content +
        ')'
    },
    editData(data) {
      tbSysDictDetailUpdate(data).then((res) => {
        if (res.data.code == 0) {
          this.$message.success('保存成功')
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    handleChangeColor(val) {
      let cArr = val
        .replace(/rgba\(/g, '')
        .replace(/\)/g, '')
        .split(', ')
      this.form.red.content = cArr[0]
      this.form.green.content = cArr[1]
      this.form.blue.content = cArr[2]
      this.form.f.content = cArr[3]
    },
    async handleSubmit() {
      if (!this.form.text.content) {
        this.warnMsg('水印文字内容不能为空')
        return
      }
      this.form.f.content = (this.form.f.content * 1).toFixed(1) + 'f'
      for (let key in this.form) {
        await tbSysDictDetailUpdate(this.form[key])
      }
      this.successMsg('保存成功')
    },
  },
}
</script>
<style scoped lang="scss">
.water-mark {
  padding: 0 20px;
  min-width: 1000px;
  h2 {
    font-size: 20px;
    line-height: 2.5;
    color: #333;
    margin-bottom: 20px;
  }
  .preview-wrap {
    float: left;
    width: 500px;
    position: relative;
    .show-txt {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 30px;
      bottom: 30px;
      overflow: hidden;
      p {
        text-indent: 2em;
        line-height: 2;
        font-size: 12px;
        color: #eee;
        user-select: none;
      }
    }
    .show-wrap {
      width: 410px;
      height: 530px;
      background: #fefefe;
      position: relative;
      border: 3px solid #666;
      overflow: hidden;
      .content {
        position: absolute;
        left: 0;
        top: 45%;
        color: rgb(255, 255, 255);
        white-space: nowrap;
      }
    }
  }
  .setting-wrap {
    float: left;
    width: 500px;
  }
}
</style>